<!-- 分类 -->
<template>
	<view class="Sort">
		<!-- 搜索 -->
		<Header-Search></Header-Search>

		<u-row class="content" justify="end">
			<u-col span="2" class="left">
				<view class="item" :class="active === index ? 'item-active' : ''" v-for="(item, index) in sortList" :key="index" @click="click(index)">
					<span :class="active === index ? 'active' : ''">{{ item.name }}</span>
				</view>
			</u-col>
			<u-col span="10">
				<u-sticky offset-top="5">
					<view style="background-color: #f0f9eb;padding: 14rpx;font-size: 24rpx;">{{ sortList[active].name }}</view>
				</u-sticky>
				<scroll-view :scroll-top="scrollTop" scroll-y="true" @scrolltolower="reachBottom" @scroll="scroll">
					<!-- 内容模块 -->
					<u-row class="Search" justify="center">
						<view class="tab" v-for="(item, index) in classList" :key="index">
							<u-col @click="gotoSortDetails(item.id)">
								<img :src="item.pic" alt="" width="100%" />
								<text class="title u-line-1" style="font-size: 24rpx;">{{ item.name }}</text>
							</u-col>
						</view>
					</u-row>
				</scroll-view>
			</u-col>
		</u-row>
		
		<u-toast ref="uToast" />
		<!-- 置顶按钮 -->
		<xrzp-Istop :goTop="goTop" :toTopShow='toTopShow'></xrzp-Istop>
		<!-- 底部选项卡 -->
		<xrzp-FootTabbar></xrzp-FootTabbar>
	</view>
</template>

<script>
import { request_byclass } from '@/api/http.js';
export default {
	data() {
		return {
			active: 0,
			sortList: [
				{ classid: 352, name: '羹' },
				{ classid: 351, name: '汤' },
				{ classid: 326, name: '面' },
				{ classid: 333, name: '馄饨' },
				{ classid: 332, name: '汤圆' },
				{ classid: 316, name: '腌菜' },
				{ classid: 313, name: '药膳' },
				{ classid: 335, name: '饺子' },
				{ classid: 334, name: '馒头' },
				{ classid: 341, name: '饼干' },
				{ classid: 324, name: '粥' }
			],
			classList: [],
			start: 0,
			scrollTop: 0,
			toTopShow: false,
			old: {
				scrollTop: 0
			},
			appkey: 'b0e7418fe9bef46dcb47a53374ffbef1'
		};
	},
	mounted() {
		this.getData();
	},
	methods: {
		async getData() {
			let data = {
				classid: this.sortList[this.active].classid,
				start: 0,
				num: 20,
				appkey: this.appkey
			};
			let res = [];
			res = await request_byclass(data);
			this.classList = res.list;
		},
		// 跳转到详情页
		gotoSortDetails(id) {
			uni.navigateTo({
				url: `/pages/Sort/SortDetails?id=${id}`
			});
		},
		// 滚动事件
		scroll(e) {
			this.old.scrollTop = e.detail.scrollTop
			this.toTopShow = this.old.scrollTop >= 300
		},
		goTop() {
			this.scrollTop = this.old.scrollTop
			this.$nextTick(function() {
				this.scrollTop = 0
			});
		},
		// 切换导航栏分类
		click(index) {
			this.active = index;
			this.start = 0;
			this.goTop()
			this.getData();
		},
		// 触底加载...
		reachBottom() {
			this.start += 20;
			let data = {
				classid: this.sortList[this.active].classid,
				start: this.start,
				num: 20,
				appkey: this.appkey
			};
			request_byclass(data).then(res => {
				if(res ){
					this.classList = [...this.classList, ...res.list];
				}else{
					this.$refs.uToast.show({
					    type:'error',
					    message:'到底了哦~',
					})  
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.Sort {
	.content {
		.left {
			position: fixed;
			left: 0;
			top: 50px;
			background-color: #f7f8fa;
			.item {
				height: calc((100vh - 202rpx) / 11);
				padding-left: 20rpx;
				line-height: calc((100vh - 202rpx) / 11);
				font-size: 28rpx;
				font-weight: bold;
				.active {
					font-weight: 400;
					&:before {
						content: '';
						border: 4rpx solid #ee0a24;
						background-color: #ee0a24;
						position: relative;
						left: -12rpx;
					}
				}
			}
			.item-active {
				padding-left: 12rpx;
				background-color: #fff;
			}
		}
		uni-scroll-view {
			width: 100%;
			height: calc(100vh - 260rpx);
			.Search {
				flex-wrap: wrap;
				.tab {
					width: 46%;
					margin-right: 20rpx;
					.title {
						text-align: center;
						margin: 10rpx 0;
					}
				}
			}
		}
	}
}
</style>
